vvvv
<script setup lang="ts">
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import EChartsComponent from "@/components/EChartsComponent/index.vue";
import { PaginationProps } from "@pureadmin/table";
import { computed, onMounted, reactive, ref } from "vue";
import { getDataBySQLDesc } from "@/api/common";
import { useDictionary } from "@/hooks/useDictionary";
defineOptions({
  name: "DeliveryAndExpeditedNumber"
});
// 使用局部混入

const searchForm = ref();
const dicData = ref([]);
const supplierOptions = computed(() => {
  return dicData.value.map(item => item.代码值);
});
const tableData = ref([]);
const columns = ref([
  {
    label: "紧急度",
    prop: "紧急度"
  },
  {
    label: "1月到料批次",
    prop: "1月到料批次"
  },
  {
    label: "2月到料批次",
    prop: "2月到料批次"
  },
  {
    label: "3月到料批次",
    prop: "3月到料批次"
  },
  {
    label: "4月到料批次",
    prop: "4月到料批次"
  },
  {
    label: "5月到料批次",
    prop: "5月到料批次"
  },
  {
    label: "6月到料批次",
    prop: "6月到料批次"
  },
  {
    label: "7月到料批次",
    prop: "7月到料批次"
  },
  {
    label: "8月到料批次",
    prop: "8月到料批次"
  },
  {
    label: "9月到料批次",
    prop: "9月到料批次"
  },
  {
    label: "10月到料批次",
    prop: "10月到料批次"
  },
  {
    label: "11月到料批次",
    prop: "11月到料批次"
  },
  {
    label: "12月到料批次",
    prop: "12月到料批次"
  },
  {
    label: "小计",
    prop: "小计"
  }
]);
const option = ref({
  tooltip: {
    trigger: "axis",
    position: function (point, params, dom, rect, size) {
      // point: 鼠标位置，格式为 [x, y]
      // params: 提示框所包含的数据信息
      // dom: 提示框的 DOM 元素
      // rect: 鼠标所在图形的包围盒，格式为 {x, y, width, height}
      // size: 提示框的大小，格式为 {contentSize: [width, height], outerSize: [width, height]}
      return [point[0] - 50, point[1] - 50]; // 设置提示框在鼠标上方 20px 处
    },
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999"
      }
    }
  },
  legend: {
    type: "scroll",
    data: ["一般", "特急", "紧急"] // 从 supplierOptions 中获取标签
  },
  xAxis: [
    {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ],
      axisPointer: {
        type: "shadow"
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        formatter: "{value}"
      }
    }
  ],
  series: [
    {
      name: "一般",
      type: "bar",
      stack: "total",
      yAxisIndex: 0,
      label: {
        show: true
      },
      data: []
    },
    {
      name: "特急",
      type: "bar",
      stack: "total",
      yAxisIndex: 0,
      label: {
        show: true
      },
      data: []
    },
    {
      name: "紧急",
      type: "bar",
      stack: "total",
      yAxisIndex: 0,
      label: {
        show: true
      },
      data: []
    }
  ]
});
const form = ref({
  action: "biz/reports/get_iqc_dljcfx",
  jydjb: null,
  jydzt: null,
  shshnd: ""
});
const searchColumns = computed<PlusColumn[]>(() => [
  {
    label: "年份",
    prop: "shshnd",
    valueType: "date-picker",
    fieldProps: {
      type: "year",
      valueFormat: "YYYY",
      placeholder: "请选择年份"
    }
  }
]);
/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: 0,
  align: "right",
  background: true,
  size: "default",
  layout: "prev, pager, next"
});
const handleChange = () => { };
const handleSearch = async () => {
  getChartsData();
};
// 获取请购紧急度
const getqgjjd = async () => {
  const { data } = await getDataBySQLDesc({
    action: "public/get_xtcs_qgjjd"
  });
  dicData.value = data;
  console.log(supplierOptions.value);

  getTime();
};
const getAllParams = async () => {
  const { data } = await getDataBySQLDesc({
    action: "public/get_bi_sjfw",
    hsmc: "get_iqc_dljcfx"
  });
  data.forEach(element => {
    form.value[element["参数编码"]] = element["参数值"];
  });
  getTime();
};
// 获取年份
const getTime = async () => {
  const { data } = await getDataBySQLDesc({
    action: "public/get_server_sysdate"
  });
  form.value.shshnd = data[0]["年"];
  getChartsData();
};
const getChartsData = async () => {
  const { data } = await getDataBySQLDesc(form.value);
  option.value.series[0].data = [];
  option.value.series[1].data = [];
  option.value.series[2].data = [];
  option.value.legend.data = [];
  data.forEach(item => {
    option.value.legend.data.push(item["紧急度"]);
  });
  const data1 = data[0];
  const data2 = data[1];
  const data3 = data[2];
  for (let i = 0; i < 12; i++) {
    if (data1) {
      option.value.series[0].data.push(data1[`${i + 1}月到料批次`]);
    }
    if (data2) {
      option.value.series[1].data.push(data2[`${i + 1}月到料批次`]);
    }
    if (data3) {
      option.value.series[2].data.push(data3[`${i + 1}月到料批次`]);
    }
  }
  tableData.value = data;
};
const handleRest = () => {
  form.value.action = "biz/reports/get_iqc_dljcfx";
  getAllParams();
};
onMounted(() => {
  getAllParams();
});
</script>

<template>
  <div class="page-content">
    <el-card>
      <PlusSearch v-model="form" searchText="搜索" resetText="重置" expand-text="展开" retractText="收起"
        :columns="searchColumns" :show-number="2" label-width="80" label-position="right" @change="handleChange"
        @search="handleSearch" @reset="handleRest" />
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <div class="chart bar-chart">
        <EChartsComponent :extraOptions="option" type="bar" />
      </div>
    </el-card>
    <el-card class="chart-card mt-[20px]">
      <PureTable border row-key="id" alignWhole="center" showOverflowTooltip :data="tableData" :columns="columns"
        :pagination="null" />
    </el-card>
  </div>
</template>
<style lang="css" scoped>
.chart {
  height: 400px;
}
</style>
